<template>
    <div>
        我是局部组件child
        <p>{{ count }}</p>
        <!-- 子传父方式1: -->
        <!-- <button @click="$emit('transfer', heroclubArr)">子传父</button> -->
        <!-- 子传父方式2: -->
        <button @click="emitFn">子传父</button>

    </div>
</template>

<script setup>
// 接收父组件传递的参数
import { defineProps, reactive, defineEmits } from 'vue'
// 方式1: 使用数组
// const props = defineProps(['count'])
// 方式2 :使用对象
const props = defineProps({
    // count:Number,
    // count: [String, Number],
    // count: {
    //     type: Number,
    //     // required: true,
    //     default: 200
    // },
    count: {
        validator(value) {
            // 接收的参数只能是如下数组中的某一个值,否则报错
            return ['success', 'warning', 'danger'].includes(value)
        }
    }


})
// console.log('props', props);

const heroclubArr = reactive(['瑞文', '亚索', '蒙多'])

const emit = defineEmits(['transfer'])

const emitFn = () => {
    emit('transfer', heroclubArr)
}

</script>
<style scoped>

</style>